<template>
  <!-- 内容 -->
  <div class="main" id="homeMain">
    <!-- 左区 -->
    <div class="left">
      <slot name="left">
        <!-- <div class="item"></div> -->
      </slot>
    </div>
    <!-- 右区 -->
    <div class="right">
      <slot name="right">
        <!-- <div class="item"></div> -->
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LayoutCol',
}
</script>

<style lang="stylus" scope>
@import '~styles/theme.styl';
// 核心
.main
  display flex
  justify-content space-between
  margin 0 auto
  width:calc(100vw - 100px)
  max-width: 1240px
  // 左区
  .left
    .item
      margin: 30px auto
      padding: 20px
      width: calc(100vw - 450px)
      max-width: 944px
      min-width: 650px
      max-height: 100%
      background var(--div)
      border-radius: 10px
      box-shadow: 0 1px 30px -4px var(--shadow);
      transition: all 0.5s;
      &:hover
        box-shadow: 0 0px 30px -3px rgba(255, 99, 138,1);
  // 右区
  .right
    margin: 30px
    .item
      padding: 10px
      margin: 0 auto 15px auto
      width: 278px
      // height: 100%
      background var(--div)
      border-radius: 10px
      box-shadow: 0 1px 30px -4px var(--transparentDiv);
      transition: all 0.5s;
      box-sizing: border-box
      box-shadow: 0 1px 15px -4px var(--shadow);
      &:hover
        box-shadow: 0 0px 30px -2px rgba(255, 99, 138,1);
</style>
